<template>
  <div id="audienceAnalysis">
    <!-- 商品详情-观众分析8/104 -->
    <template v-if="vipRootObj[8][104].owner">
      <template v-if="!listLoading">
        <div v-if="dataALL && dataALL.maxGender && genderRate">
          <p class="title">观众概览</p>
          <div class="AnalysisCon">
            <div>
              <img
                v-if="
                  dataALL && dataALL.maxGender && dataALL.maxGender.name == '男性'
                "
                class="sex"
                src="@/assets/liu/man.png"
                alt
              />
              <img
                v-if="
                  dataALL && dataALL.maxGender && dataALL.maxGender.name == '女性'
                "
                class="sex"
                src="@/assets/liu/goodsgirl.png"
                alt
              />
              <span class="contxt" v-if="dataALL && dataALL.maxGender && dataALL.maxGender.name">
                {{ dataALL.maxGender.name }}居多，占比{{
                dataALL.maxGender.value
                }}%
              </span>
            </div>
            <div>
              <img class="age" src="@/assets/liu/age.png" alt />
              <span class="contxt" v-if="dataALL && dataALL.maxAge">
                {{ dataALL.maxAge.name }}居多，占比{{
                dataALL.maxAge.value
                }}%
              </span>
            </div>
            <div>
              <img class="raphy" src="@/assets/liu/raphy.png" alt />
              <span
                class="contxt"
                v-if="dataALL && dataALL.maxCity"
              >{{ dataALL.maxCity.name }}居多，占比{{ dataALL.maxCity.value }}%</span>
            </div>
          </div>
          <div class="AnalysisConBot">
            <div>
              <p class="tit">观众性别分析</p>
              <div class="Spread">
                <GenderSpread :pieData="genderRate" v-if="genderRate.length" />
                <p v-else>暂无数据</p>
              </div>
              <p class="tit">观众年龄分析</p>
              <div class="chart1">
                <BarChart v-if="ageData.length" pieName="观众年龄占比" :pieData="ageData" />
                <div class="no_data" v-else>
                  <img src="@/assets/shi/zanwushuju.png" alt />
                  <div>暂无数据</div>
                </div>
              </div>
            </div>
            <div>
              <p class="tit">观众地域分布</p>
              <div class="chart2">
                <SideBarChart v-if="provinceRate.length" :pieData="provinceRate" pieName="观众地域占比" />
                <div class="no_data" v-else>
                  <img src="@/assets/shi/zanwushuju.png" alt />
                  <div>暂无数据</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <div
        v-if="!genderRate.length"
        style="margin-top: 30px; margin-bottom: 100px"
        v-loading="listLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>
      <div class="zw" v-if="!listLoading && !genderRate.length">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>
    </template>

    <div class="dialogEg" v-else>
      <img :src="$global.staticUrl + 'image/egImg/goodsJurisdiction.png'" alt />
      <payVip routerName="compare" :lowestVipNum="vipRootObj[8][104].ownerMinLevel" />
    </div>
  </div>
</template>

<script>
import GenderSpread from '@/pages/wang/workbench/GenderSpread.vue';
import SideBarChart from '../../../pages/wang/talent/tdetails/NewComponents/SideBarChart.vue';
import BarChart from '@/pages/wang/talent/tdetails/NewComponents/BarChart.vue';
// import SideBarChart from "@/pages/wang/talent/tdetails/NewComponents/SideBarChart.vue";
export default {
  props: ['id'],
  data() {
    return {
      listLoading: false,
      percentage: null,
      percentage1: null,
      fansDiYu: [],
      sex: [],
      genderRate: [], //  // 粉丝性别
      ageData: [],
      // 粉丝年龄
      ageData: [],
      // 地域分布
      provinceRate: [],
      sex: false,
      dataALL: [],
      hasHeigth: 0,
      vipRootObj: this.$store.state.userRoot //会员权限对象
    };
  },
  components: {
    GenderSpread,
    SideBarChart,
    BarChart
  },
  computed: {},
  created() {},
  mounted() {
    if (this.vipRootObj[8][104].owner) {
      this.GetFansPortrait();
    }
  },
  watch: {},
  methods: {
    // 性别分布  // 地域分布  // 年龄分布
    GetFansPortrait() {
      this.listLoading = true;
      let that = this;
      that.$axios
        .get(
          '/api/Product/GetProAudience',
          {
            params: {
              ProId: this.id
              // ProId: "3487748950235198351"
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          this.listLoading = false;
          if (res.data.code == 0) {
            this.dataALL = res.data.data;
            that.genderRate = res.data.data.genderRate;
            // this.sex = [that.genderRate[0].value, that.genderRate[1].value]
            // if (that.genderRate[0].value > that.genderRate[1].value) {
            //   this.percentage = that.sex[0] / (that.sex[0] + that.sex[1])
            //   this.percentage = (this.percentage * 100).toFixed(2)
            // } else {
            //   this.percentage1 = that.sex[1] / (that.sex[0] + that.sex[1])
            //   this.percentage1 = (this.percentage1 * 100).toFixed(2)
            // }

            that.ageData = res.data.data.ageRate;

            // let arr = that.ageData.map(res => {
            //   return res.value;
            // });

            that.provinceRate = res.data.data.provinceRate;
            // res.data.data.provinceRate.forEach(item => {
            //   that.provinceRate.push(item);
            // });
            this.$nextTick(() => {
              let cheight = that.provinceRate.length * 45;
              if (this.$refs.chart2) {
                if (cheight < 135) {
                  this.$refs.chart2.style.height = ' 135px';
                } else {
                  this.$refs.chart2.style.height = cheight + 'px';
                }

                this.hasHeigth = 1;
              }
            });
            that.cityRate = res.data.data.cityRate;
            that.finishFlag = true;
            // console.log("地图", that.provinceRate);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="less" scoped>
#audienceAnalysis {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  box-sizing: border-box;
  .title {
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #222222;
    position: relative;
    text-indent: 10px;
    &::after {
      width: 4px;
      height: 16px;
      background-color: #fd7f2c;
      border-radius: 2px;
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .AnalysisCon {
    display: flex;
    height: 100px;
    > div {
      // margin-right: 152px;
      width: 285px;
      border-right: 1px solid #efefef;
      align-self: center;
      margin-left: 50px;
      box-sizing: border-box;
      &:nth-child(3) {
        border-right: 0;
      }
      &:nth-child(1) {
        margin-left: 0 !important;
      }
      .sex {
        width: 22px;
        height: 24px;
        margin-right: 10px;
      }
      .age {
        width: 23px;
        height: 24px;
        margin-right: 10px;
      }
      .raphy {
        width: 20px;
        height: 24px;
        margin-right: 10px;
      }
      .contxt {
        font-size: 14px;
        letter-spacing: 0px;
        color: #222222;
      }
    }
  }
  .AnalysisConBot {
    display: flex;
    > div {
      flex: 1;
      .Spread {
        width: 100%;
        height: 100px;
        display: flex;
        p {
          width: 100%;
          min-height: 80px;
          line-height: 80px;
          text-align: center;
          color: #555;
          font-size: 14px;
        }
        #GenderSprea {
          padding: 0 !important;
        }
      }
      .tit {
        font-size: 16px;
        font-weight: 600;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #222222;
        position: relative;
        text-indent: 10px;
        &::after {
          width: 4px;
          height: 16px;
          background-color: #fd7f2c;
          border-radius: 2px;
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .chart1 {
        width: 100%;
        height: 230px;
        p {
          min-height: 200px;
          line-height: 200px;
          text-align: center;
          color: #555;
          font-size: 14px;
        }
      }
      .chart2 {
        width: 100%;
        height: 297px;
        margin-top: 25px;
        // overflow: scroll;
        > div {
          width: 100%;
          // height: 780px;
        }
      }
      .no_data {
        height: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #b5b5b5;
      }
    }
  }
}
</style>
